<template>
	<view class="popup" v-if="isShow">
		<view class="popup-box">
			<view class="popup-title">
				跑步设备配置
			</view>
			<view class="popup-one">
				<view :class="index==current?'one-item active':'one-item'" v-for="(item,index) in items" :key="index" @click="changeItem(index)">
					{{item}}
				</view>
			</view>
			<view class="popup-two" v-if="showMore">
				<input class="uni-input" v-model="value" placeholder="请输入跑道米数">
				<text class="two-text">注意：是实际跑道米数，不是测试项目米数！！！</text>
				<!-- <input class="uni-input" v-model="value1" placeholder="请输入起点设备编号"> -->
				<picker @change="bindPickerChange" :value="index" :range="array">
					<view class="uni-box">
						<text>{{array[index] || '请选择起点设备'}}</text>
						<image src="/static/images/icon.png" mode="widthFix"></image>
					</view>
				</picker>
			</view>
			<button @click="submitRun">确定</button>
		</view>
	</view>
</template>

<script>
	export default {
		name:"runModel",
		data() {
			return {
				isShow: false,
				items:['起点设备','终点设备'],
				current: 0,
				showMore:false,
				value:'',
				array: [],
				index: -1,
				sbId:'',
				proid:'',
				startName:''
			};
		},
		mounted() {

		},
		methods:{
			async getUser(){
				let res = await this.http('get','/system/user/getInfo')
				console.log(res)
				if(res.code==200){
					this.getSb(res.user.deptId)
				}
			},
			async getSb(e){
				let that=this
				that.array=[]
				let res = await this.http("get","/tc/shebei/list",{
					pageNum:1,
					pageSize:15,
					sbXxid:e,
					sbClientid:''
				})
				if(res.code==200){
					console.log(res.rows)
					if(res.rows.length>0){
						res.rows.forEach(item=>{
							if(that.sbId!=item.id&&that.proid==item.shebeiProjectList[0].projectid){
								console.log(item.sbClientid)
								that.array.push(item.sbClientid)
							}
						})
					}
				}
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
				this.startName = this.array[e.detail.value]
			},
			openModel(eqid,proid) {
				this.isShow = true
				this.sbId = eqid
				this.proid = proid
				this.getUser()
			},
			changeItem(e){
				this.current = e
				if(e==1){
					this.showMore = true
				}else{
					this.showMore = false
				}
			},
			submitRun(){
				if(this.current==1){
					if(this.value==''){
						this.toast('请输入跑道米数')
						return false
					}
					if(this.startName==''){
						this.toast('请选择起点设备')
						return false
					}
					let info={
						qid:this.sbId,
						runway:this.value,
						startName:this.startName
					}
					this.$emit('runData',info)
				}
				this.closeBtn()
			},
			closeBtn() {
				this.current = 0
				this.value=''
				this.index = -1
				this.startName = ''
				this.isShow = false
				this.showMore = false
			}
		}
	}
</script>

<style lang="less">
	.popup {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(0, 0, 0, 0.3);
		z-index: 9;

		.popup-box {
			width: 80%;
			border-radius: 32upx;
			background: linear-gradient(180deg, #CDDAF8 0%, #FFFFFF 23%);
			padding: 20upx 40upx;
			box-sizing: border-box;
			.popup-title {
				width: 100%;
				line-height: 72upx;
				text-align: center;
				padding-top: 10upx;
				font-size: 32upx;
				font-weight: bold;
				color: #1A1A1A;
			}
			.popup-one{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 20upx 0;
				.one-item{
					width: 48%;
					background-color: #F5F7F9;
					text-align: center;
					font-size: 28upx;
					color: #1A1A1A;
					height: 80upx;
					line-height: 80upx;
					border-radius: 12upx;
				}
				.active{
					background: linear-gradient(0deg, #5EA9FA 0%, #7CB6F5 100%);
					color: #fff;
				}
			}
			.popup-two{
				width: 100%;
				margin: 20upx 0;
				.uni-input{
					width: 100%;
					height: 80upx;
					background-color: #F5F7F9;
					margin-bottom: 10upx;
					padding: 0 20upx;
					box-sizing: border-box;
					border-radius: 12upx;
					font-size: 28upx;
				}
				.two-text{
					font-size: 24upx;
					color: red;
					display: block;
					margin-bottom: 20upx;
				}
				.uni-box{
					width: 100%;
					height: 80upx;
					background-color: #F5F7F9;
					margin-bottom: 20upx;
					padding: 0 20upx;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 28upx;
					border-radius: 12upx;
					image {
						width: 40upx;
						height: auto;
					}
				}
			}
			button {
				border-radius: 120upx;
				background: linear-gradient(0deg, #5EA9FA 0%, #7CB6F5 100%);
				color: #fff;
				margin-top: 40upx;
				font-size: 32upx;
				line-height: 92upx;
			}
		}
	}
</style>